<template>
	<view class="container box">
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :collection="collections" :page-size="5"
			:page-current="page" loadtime="manual">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading" class="refreash"><uni-icons type="reload" size="30"></uni-icons>
			</view>
			<view v-else>
				<template v-for="index in data.length">
					<view class="card-item">
						<view class="card-head">
							<image :src="data[index].publisher[0].user_avatar" mode="aspectFill" class="head-left">
							</image>
							<view class="head-right">
								{{data[index].publisher[0].user_name}}
								<view class="upload">
									{{formatTime(data[index].uploadTime)}}
								</view>
							</view>
						</view>
						<view class="card-content " @click="detailFn(data[index]._id._value)">
							<view class="text-overflow  content-txt">
								<span class="label">{{labelFn(data[index].label)}}</span>{{data[index].contentTxt}}
							</view>
							<view class="content-imgs">
								<template v-for="img in data[index].contentImg">
									<image :src="img" mode="aspectFit" class="content-img"></image>
								</template>
							</view>
						</view>
						<view class="card-tab">
							<view class="tab-item">
								<uni-icons type="chat" size="28" class="tab-img"
									@click="current_index=data[index]._id._value;chatFn(data[index].comments,data[index]._id._value)"></uni-icons>
								{{data[index].comments.length}}
							</view>
							<view class="tab-item" @click="changeIndexFn(data[index]._id._value)">
								<unicloud-db ref="dataQuery1" v-slot:default="{loading, data, error, options}"
									:options="data[index]" collection="dynamicLike"
									:where="`dynamic_id == '${data[index]._id._value}' && liker != '${$store.getters.getToken}'`">
									<uni-icons class="tab-img" v-if="data.length != options._id.dynamicLike.length"
										color="red" type="hand-up-filled" size="28"></uni-icons>

									<uni-icons class="tab-img" color="black" type="hand-up" v-else
										size="28"></uni-icons> {{options._id.dynamicLike.length}}
								</unicloud-db>
							</view>
							<!-- <uni-icons class="tab-img" color="black" @click="changeLike(index)" type="hand-up"
										v-if="data[index]._id.dynamicLike.length==0" size="28"></uni-icons>

									<block v-for="(item,ind) in data[index]._id.dynamicLike"
										v-if="data[index]._id.dynamicLike.length>0">
										<uni-icons class="tab-img" v-if="item.liker==$store.getters.getToken"
											color="red" @click="changeLike(index)" type="hand-up-filled"
											size="28"></uni-icons>
									</block>
									<uni-icons class="tab-img" color="black" @click="changeLike(index)" type="hand-up"
										v-if="data[index]._id.dynamicLike.length==0" size="28"></uni-icons> -->
						</view>
					</view>
				</template>
			</view>
		</unicloud-db>
		<!-- 			<template v-for="(item,index) in dynamicData" v-if="dynamicData&&dynamicData.length>0">
				<view class="card-item">
					<view class="card-head">
						<image :src="item.avatar" mode="aspectFill" class="head-left"></image>
						<view class="head-right">
							{{item.username}}
							<view class="upload">
								{{formatTime(item.time)}}
							</view>
						</view>
					</view>
					<view class="card-content " @click="detailFn(item.id)">
						<view class="text-overflow  content-txt">
							<span class="label">{{labelFn(item.label)}}</span>{{item.contentTxt}}
						</view>
						<view class="content-imgs">
							<template v-for="img in item.contentImg">
								<image :src="img" mode="aspectFit" class="content-img"></image>
							</template>
						</view>
					</view>
					<view class="card-tab ">
						<view class="tab-item">
							<uni-icons type="chat" size="28" class="tab-img" @click="chatFn(index)"></uni-icons>
							{{item.comments.length}}
						</view>
						<view class="tab-item">
							<uni-icons class="tab-img" :color="item.isLike?'red':'black'" @click="changeLike(index)"
								:type="item.isLike?'hand-up-filled':'hand-up'" size="28"></uni-icons>
							{{item.likes}}
						</view>
					</view>
				</view>
			</template> -->
		<uni-fab ref="fab" :pattern="fabSet.pattern" :content="fabSet.content" :horizontal="fabSet.horizontal"
			:vertical="fabSet.vertical" :direction="fabSet.direction" @trigger="selectFn" />
		<uni-popup ref="poupref" class="comments" type="share" safeArea backgroundColor="#fff">
			<scroll-view class="comment" scroll-y="true">
				<template v-for="(comment,commentIndex) in comments_tf">
					<view class="comment-item">
						<span class="comment-left">{{comment.username}}:</span>
						<span class="comment-right">{{comment.comment}}</span>
						<uni-icons type="trash" size="20" color="red" @click="delComment(commentIndex)"
							class="delComment" v-if="comment.account==account">
						</uni-icons>
					</view>
				</template>
				<view class="input_remark">
					<input type="text" v-model="remark" placeholder="请评论内容"
						placeholder-style="font-size:0.8rem;letter-spacing:2rpx" />
					<view class="send" @click="send()">
						发送
					</view>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import getDateDiff from '../../util/timeFormat.js'
	import {
		verify,
		getDynamicData,
		check,
		remove,
		addData,
		acquireData
	} from '../../database/index.js'
	export default {
		data() {
			return {
				collections: [
					db.collection('dynamic').orderBy('uploadTime desc').getTemp(),
					db.collection('user').getTemp(),
					db.collection('dynamicLike').getTemp()
				],
				page: 1,
				comments_tf: [],
				loadindex: 0,
				iflike: false,
				account: '',
				remark: '',
				fabSet: {
					directionStr: '垂直',
					horizontal: 'left',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#007AFF',
						buttonColor: '#7B68EE',
						iconColor: '#fff'
					},
					content: [{
							iconPath: 'https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/VDA.png',
							text: '写动态',
							active: false
						},
						{
							iconPath: 'https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/edit.png',
							text: '编辑动态',
							active: false
						},
						{
							iconPath: 'https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/top.png',
							text: '回到顶部',
							active: false
						}
					],
				},
				current_index: 0,
				dynamicData: []
			}
		},
		methods: {
			changeIndexFn(id) {
				this.current_index = id
				this.changeLike()
			},
			async chatFn(comments) {
				this.$refs.poupref.open();
				this.comments_tf = []
				for (let data of comments) {
					let user = await acquireData('user', {
						_id: data.account
					})
					this.comments_tf.push({
						account: data.account,
						username: user[0].user_name,
						comment: data.comment
					})
				}
			},
			async selectFn(e) {
				switch (e.index) {
					case 0:
						this.$go2Page('editDynamic')
						break
					case 1:
						this.$go2Page('manageDynamic')
						break
					case 2:
						this.fabSet.vertical = this.fabSet.vertical == 'top' ? 'bottom' : 'top'
						this.fabSet.content[2].text = this.fabSet.vertical == 'top' ? '回到底部' : '回到顶部'
						this.fabSet.horizontal = this.fabSet.vertical == 'top' ? 'right' : 'left'
						this.fabSet.content[2].iconPath = this.fabSet.vertical == 'top' ?
							'https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/bottom.png' :
							'https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/set/top.png'
						break
				}
			},
			formatTime(stamp) {
				setInterval(() => {
						this.formatTime(stamp)
					},
					60 * 1000)
				return getDateDiff(stamp)
			},
			async changeLike() {
				let [ischeck, msg] = await check('dynamicLike', [{
					dynamic_id: this.current_index,
					liker: this.$store.getters.getToken
				}])

				if (!ischeck) {
					if (await remove('dynamicLike', {
							dynamic_id: this.current_index,
							liker: this.$store.getters.getToken
						})) {
						this.$showMsg('取消点赞')
						this.freshFn()
					} else {
						this.$showMsg('取消点赞失败')
					}
				} else {
					let [isadd, msg] = await addData('dynamicLike', {
						dynamic_id: this.current_index,
						liker: this.$store.getters.getToken
					})
					if (isadd) {
						this.$showMsg('点赞成功')
						this.freshFn()
					} else {
						this.$showMsg('点赞失败')
					}
				}
			},

			labelFn(label) {
				switch (label) {
					case 0:
						return '运动记录'
					case 1:
						return '心情记录'
				}
			},
			freshFn() {

				this.$refs.udb.loadData({
					clear: true
				}, () => {
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				})
			},
			detailFn(id) {
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/community/dynamicDetail/dynamicDetail?id=${id}`
					})
				}, 0.5 * 1000)
			},
			async delComment(index, id) {
				this.comments_tf.splice(index, 1)
				let comments = this.comments_tf.slice(0)
				let commentData = []
				for (let comment of comments) {
					commentData.push({
						account: comment.account,
						comment: comment.comment
					})
				}
				let [isdel, msg] = await verify('dynamic', {
					_id: this.current_index
				}, {
					comments: commentData
				})
				if (isdel) {
					this.$showMsg('删除成功')
					this.freshFn()
				} else {
					this.$showMsg('删除失败')
				}
			},
			async send() {
				if (!this.remark) {
					this.$showMsg('评论内容不能为空')
					return
				}
				let commentData = await acquireData('dynamic', {
					_id: this.current_index
				})
				let updateData = commentData[0].comments
				this.comments_tf.push({
					username: this.$store.getters.getUserName,
					account: this.$store.getters.getToken,
					comment: this.remark
				})
				updateData.push({
					account: this.$store.getters.getToken,
					comment: this.remark
				})
				let [isadd, msg] = await verify('dynamic', {
					_id: this.current_index
				}, {
					comments: updateData
				})
				if (isadd) {
					this.$showMsg('评论成功')
					this.freshFn()

				}
				this.remark = ''
			},

		},
		async onLoad() {
			this.loadindex = 0
			this.account = this.$store.getters.getToken
			this.$refs.udb.loadData()

		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		async onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
			let res = await db.collection('dynamic').get({
				getCount: true
			})

		},
		async onShow() {
			let self = this
			if (getApp().globalData.param) {
				uni.showModal({
					title: '提示',
					content: '是否确定返回',
					success: async function(res) {
						if (res.confirm) {
							self.$go2Page('sport')
						}
					}
				})
				getApp().globalData.param = ''
			}
			if (this.loadindex != 0) {
				this.account = this.$store.getters.getToken
				this.$refs.udb.loadData({
					clear: true
				}, () => {

				})
			} else {
				this.loadindex += 1
			}

		}
	}
</script>

<style lang="scss" scoped>
	$tabSize: 50rpx;



	.input_remark {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;

		input {
			color: #696969;
			flex: 1;
			padding: 10rpx;
			background-color: aliceblue;
			margin-right: 15rpx;
			border-radius: 10rpx/5rpx;
			flex: 1;
		}

		.send {
			padding: 8rpx 10rpx;
			width: 200rpx;
			text-align: center;
			background-color: #4682B4;
			color: white;
			border: 1px solid #4682B4;
			border-radius: 10rpx;
		}
	}

	::v-deep {
		.uni-popup__wrapper {
			padding: 10rpx 20rpx;
			padding-top: 30rpx;
			background-color: #f8f8f8;

		}

	}

	.comments {

		.comment {
			max-height: 300rpx;
			min-height: 0;
		}

		.comment-item {
			margin-bottom: 20rpx;
			position: relative;

			.delComment {
				position: absolute;
				right: 10rpx;
				bottom: 0;
			}

			.comment-left {
				white-space: nowrap;
				margin-right: 20rpx;
				font-weight: 600;
				color: #363636;
			}

			.comment-right {
				word-wrap: break-word;
				color: #6d6d6d;
				letter-spacing: 3rpx;
			}
		}
	}

	.box {
		color: black;
		padding-bottom: 100px;
	}

	.card-item {
		margin-bottom: 30rpx;
		background-color: white;
		padding: 20rpx;

		.card-content {
			margin-top: 30rpx;

			.content-txt {
				line-height: 1.6rem;
				-webkit-line-clamp: 3;
				line-clamp: 3;

				.label {
					margin-right: 10rpx;
					padding: 10rpx 20rpx;
					font-size: 0.8rem;
					background-color: rgba(119, 136, 153, .2);
					color: #4682B4;
					font-weight: 600;
					border-radius: 10rpx;
				}
			}

			.content-imgs {
				background-color: #f4f4f4;
				display: flex;
				margin-top: 10rpx;
				padding: 0;
				justify-content: space-around;

				.content-img {
					border: 1px solid #fff;
					width: 200rpx;
					height: 200rpx;
					background-color: white;
					border-radius: 8rpx;
				}
			}
		}

		.card-tab {
			margin-top: 10rpx;
			display: flex;
			width: 100%;
			justify-content: space-around;

			.tab-item {
				font-size: 1.1rem;

				.tab-img {
					vertical-align: text-top;
					width: $tabSize;
					height: $tabSize;
				}
			}
		}

		.card-comment {
			margin-top: 10rpx;
			padding: 15rpx;
			background-color: rgba(220, 220, 220, .5);
		}
	}

	.card-head {
		display: flex;
		flex-direction: row;

		.head-left {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 5rpx solid #B0C4DE;
		}

		.head-right {
			flex: 1;
			position: relative;
			margin-left: 20rpx;
			font-size: 1.1rem;
			font-weight: 600;
			letter-spacing: 2rpx;

			.upload {
				letter-spacing: 0;
				font-weight: 100;
				font-size: 0.8rem;
				color: #afafaf;
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>